<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>书籍情况</h1>
    <com-a v-for="n in names" :name="n" @abc="fun_a"></com-a>
    <br/>
    <b>书籍总量：{{number}}</b>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>

    Vue.component('com-a', {
        props: ['name'],
        data() {
            return {
                number: 0
            }
        },
        methods: {
            fun_a() {
                this.number++
                this.$emit('abc')
            }
        },
        template: `
          <div>
            图书名称：{{ name }},图书数量：{{ number }}&nbsp;&nbsp;
            <button @click="fun_a">+1</button>
          </div>
        `
    })

    new Vue({
        el: '#app',
        data() {
            return {
                names: ['数学', '英语', '语文', '化学'],
                number: 0
            }
        },
        methods: {
            fun_a() {
                this.number++
            }
        }
    })
</script>